<template>
  <el-dialog v-model="visible" title="回复消息" width="500" draggable>
    <div v-if="formData.replyMessageType === 'text'">
      {{ formData.replyContent }}
    </div>
    <div v-if="formData.replyMessageType === 'image'">
      <el-image class="preview" :src="ip + formData.replyContent" />
    </div>
    <div v-if="formData.replyMessageType === 'video'">
      <video :src="ip + formData.replyContent" class="video" controls />
    </div>
    <div v-if="formData.replyMessageType === 'file'">
      <div class="file_msg">
        <div class="file_top">
          <i class="iconfont icon-04"></i>
          <el-text :title="formData.replyContent" truncated class="name">
            {{ formData.replyContent }}
          </el-text>
        </div>
        <div class="file_bottom">
          <span class="kb"
            >{{ (formData.replyFileSize / 1024 / 1024).toFixed(2) }} M</span
          >
          <a class="button" :href="ip + formData.replyContent">
            <el-button size="small" type="info" plain>下载</el-button>
          </a>
        </div>
      </div>
    </div>
    <div
      v-if="formData.replyMessageType === 'voice'"
      class="voice_message"
      @click="open"
      title="点击播放语音"
    >
      <span>{{ formData.replyFileSize }}''</span>
      <i class="iconfont icon-yuyinbofang" />
    </div>
  </el-dialog>
</template>

<script setup>
import { ref, nextTick } from "vue";

const ip = import.meta.env.VITE_APP_ACCESS_IP;

const visible = ref(false);
const formData = ref({});
const show = (data) => {
  visible.value = true;
  nextTick(() => {
    formData.value = Object.assign({}, data);
  });
};

defineExpose({ show });

const audio = ref();
const open = () => {
  if (!audio.value) {
    audio.value = new Audio(ip + formData.value.replyContent);
    audio.value.play();
  } else {
    if (audio.value.paused) {
      audio.value.play();
    } else {
      audio.value.pause();
    }
  }
};
</script>

<style lang="scss" scoped>
.preview {
  width: 100%;
  height: 100%;
}

.video {
  width: 100%;
  height: 100%;
}

.file_msg {
  border-radius: 5px;
  border: 1px solid #ddd;
  width: 100%;
  height: 100%;
  background: #eaeaea;

  .file_top {
    padding: 20px 10px;
    border-bottom: 1px solid #ddd;
    display: flex;
    align-items: center;

    .iconfont {
      font-size: 15px;
    }

    .name {
      margin-left: 5px;
      height: 16px;
    }
  }

  .file_bottom {
    display: flex;
    justify-content: space-between;
    .kb {
      margin-top: 10px;
      margin-left: 5px;
      font-size: 10px;
    }
    .button {
      margin-top: 4px;
      margin-right: 5px;
    }
  }
}

.voice_message {
  cursor: pointer;
  font-size: 12px;
  background: #eaeaea;
  padding: 14px;
  border-radius: 5px;
  max-width: 650px;
  white-space: break-spaces; // 显示换行
  i {
    margin-left: 10px;
  }
}
</style>
